<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <caption>个人信息</caption>
  <tr>

    <td>照片</td>
    <td id="head_td"></td>
  </tr>
  <tr>
    <td>名字:</td>
    <td id="name_td"></td>
  </tr>
  <tr>
    <td>年龄:</td>
    <td id="age_td"></td>
  </tr>
  <tr>
    <td>好友</td>
    <td id="friend_td"></td>
  </tr>
</table>
<input type="button" value="请求数据" onclick="f()">
<script>
  function  f(){
    let person={name:"苍老师",age:18,url:"../a.jpg",friends:["传奇","克晶","成恒"]}
    let img=document.createElement("img");
    img.src=person.url;
    head_td.append(img);
    name_td.innerText=person.name;
    age_td.innerText=person.age;
    let ul=document.createElement("ul")
    for (let friend of person.friends){
      let li=document.createElement("li");
      li.innerText=friend;
      ul.append(li);
    }
    friend_td.append(ul);



  }
</script>

</body>
</html>